<template>
    <div class="container">
        <div class="carousel">
            <div v-for="(image, index) in images" :key="index" class="image"
                :style="{ 'background-image': `url(${image})` }"></div>
        </div>
    </div>
</template>
  
<script>
import img1 from '@/assets/images/quan2.png';
import img2 from '@/assets/images/quan1.png';
import img3 from '@/assets/images/quan3.png';
import img4 from '@/assets/images/quan5.png';
import img5 from '@/assets/images/quan4.png';
export default {
    data() {
        return {
            images: [img1, img2, img3, img4, img5]
        }
    },
}

</script>

<style lang="scss">
@keyframes rotate {
    0% {
        transform: rotateZ(0deg) ;
    }

    100% {
        transform: rotateZ(360deg);
    }
}

.container {
    perspective: 200px;
}

.carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    /* animation: rotate 10s infinite linear;
    transform-style: preserve-3d; */
    transform: rotateX(80deg);

    div {
    }
}

.image {
    width: 200px;
    height: 200px;
    margin: 0 10px;
    background-size: cover;
    background-position: center;
     animation: rotate 10s infinite linear;
    transform-style: preserve-3d;
}
</style>